<template>
  <div class="mallInfoForm">
    <el-form :model="form" :label-suffix="isView ? ':' : ''" :hide-required-asterisk="isView" :rules="mallInfoFormRules" ref="formRef" label-width="130px">
      <el-form-item label="允许上架商城" prop="allowMall">
        <div v-if="!isView">
          <el-radio-group :disabled="salesState === 2" v-model="form.allowMall">
            <el-radio :label="1">允许上架</el-radio>
            <el-radio :label="2">不允许上架</el-radio>
          </el-radio-group>
          <div class="tips lineHeight">若允许上架，商品可在商城售卖</div>
        </div>
        <span v-else>{{ form.allowMall === 1 ? '允许上架':'不允许上架' }}</span>
      </el-form-item>
      <el-form-item label="配送方式" prop="pickType"  v-if="form.allowMall === 1">
        <div v-if="!isView">
          <el-radio-group  v-model="form.pickType">
            <el-radio :label="3">快递配送</el-radio>
            <el-radio :label="2">用户自提</el-radio>
            <el-radio :label="1">外卖配送</el-radio>
          </el-radio-group>
        </div>
        <span v-else>
          <span v-if="form.pickType == 3">快递配送</span>
          <span v-else-if="form.pickType == 2">用户自提</span>
          <span v-else-if="form.pickType == 1">外卖配送</span>
          <span v-else>-</span>
        </span>
      </el-form-item>
      <el-form-item label="商品视频" prop="productVideo" v-if="form.allowMall === 1">
        <div style="margin-top:5px;" v-if="!isView">
          <UploadVideo
            :videoInfo="form.productVideo"
            @backValue="backValueVideo"
          >
          </UploadVideo>
          <div class="tipBox" style="font-size:12px;color:#666">仅允许上传单个视频，大小限制在 100M，仅支持 mp4 格式</div>
        </div>
        <div v-else>
          <video :src="form.productVideo" controls style="width:380px;height:214px" v-if="form.productVideo != '-'"></video>
          <span v-else>-</span>
        </div>
      </el-form-item>
      <el-form-item label="商品平台服务费" prop="mallPlatformFee" v-if="form.allowMall === 1">
        <div v-if="!isView" style="position:relative">
          <el-input 
            style="width: 260px;"
            v-model.trim="form.mallPlatformFee" 
            placeholder="请输入" 
            @input="mallPlatformFeeInput" 
          />
          <span style="position:absolute;right:10px">%</span>
        </div>
        <div v-else>
          <span v-if="form.mallPlatformFee != '-'">{{ form.mallPlatformFee }}%</span>
          <span v-else>-</span>
        </div>
      </el-form-item>
      <el-form-item v-if="form.allowMall === 1" label="产品详情" prop="detail" :rules="imgRules">
        <div class="w100">
          <!-- <el-input v-if="!isView" class="inputDetail" :maxlength="500" placeholder="请输入" v-model.trim="form.detail" type="textarea" :rows="5"></el-input> -->
          <Editor  v-if="!isView" ref="editor"  style="margin-bottom: 16px;" :defaultValue="form.detail" @changeHtml="changeHtml"></Editor>
          <div v-else v-html="form.detail" class="detail"></div>
          <div v-if="!isView">
            <UploadImg  :imageListUrlInfo="form.imgs" :maxImgLength="20" :multiple="true" @backValue="backValueImg">
            </UploadImg>
            <div class="tips">支持jpg、jpeg、png格式；最多20张，单张不超过5M</div>
          </div>
          <template v-else>
            <div class="imgBox">
              <el-image 
                  class="imgItemBox" 
                  v-for="(item,index) in form.imgs" 
                  :key="index" 
                  :src="item"
                  :preview-src-list="form.imgs"
                  :initial-index="index"
                  fit="contain"
                ></el-image>
            </div>
          </template>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import UploadImg from '@/components/UploadImg/index.vue'
import UploadVideo from "@/components/UploadVideo/index.vue";
import {mallInfoFormRules} from './rules.js'
import { limitFloat } from '@/utils/common'
import Editor from '@/components/Editor/index.vue'
const editor = ref(null);


const props = defineProps({
  isView: {
    type: Boolean,
    default: false
  },
  salesState:{
    type: Number,
    default: 0
  }
})
const formRef = ref();
const pickTypeList = [{
  label: "快递配送",
  value: 3
},{
  label: "用户自提",
  value: 2
},{
  label: "外卖配送",
  value: 1
}]
const form = ref({
  allowMall: 2,
  pickType:3,
  productVideo:"",
  mallPlatformFee:"0",
  detail: "",
  imgs: [],
});

const imgRules = [{
  required: true,
  validator: (rule, value, callback) => {
    console.log('zhixingl');
    if (!form.value.imgs.length && form.value.detail == "<p><br></p>") {
      callback(new Error("请上传图片或填写详情"));
    } else {
      callback();
    }
  },
  trigger: "blur",
}]
const backValueVideo = (value) => {

  if(value && value.length>0){
    form.value.productVideo = value[0];
  }else{
    form.value.productVideo = "";
  }
}
const backValueImg = (value) => {
  form.value.imgs = value;
  formRef.value.validateField('detail');
}
const reset = ()=>{
  form.value = {
    allowMall: 2,
    pickType:3,
    productVideo:"",
    mallPlatformFee:"",
    detail: "",
    imgs: [],
  }
}
const changeHtml = (value)=>{
  form.value.detail = value;
}
const mallPlatformFeeInput = ()=> {
  form.value.mallPlatformFee=limitFloat(form.value.mallPlatformFee)
  if(Number(form.value.mallPlatformFee) > 99){
    form.value.mallPlatformFee = '99' 
  }

}
defineExpose({
  formRef,
  form,
  reset
})
</script>

<style lang="less" scoped>
.tips {
  color: #666;
  font-size: 12px;
  width: 450px;
}
.lineHeight{
  line-height: 12px;
}
.mallInfoForm {
  margin-top: 24px;

  .inputDetail{
    width:260px;
    margin-bottom: 16px;
    :deep(.el-textarea__inner){
      padding: 9px 16px;
    }
  }
}
.imgBox{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  .imgItemBox{
    width: 160px;
    height: 160px;
    border-radius: 16px;
    border: 1px solid #DDD;
  }
}
::deep(.editor){
  width: 600px !important;
  height: 500px !important;
}

.detail {
 margin-top: -14px;
}

</style>